<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按照常规形式写样式绑定</title>
</head>
<style>
    .colordecroation {
        color: red;
    }
    .linedecoration {
        text-decoration: underline;
    }
</style>
<!--<script src="../../../../../js/vue.global.js"></script>-->
<body>
<div id="app">
    <h1 class="colordecroation">Hello World!</h1>
<!--    错误写法-->
    <h1 :class="linedecoration">Hello Vue!</h1>
    <h1 :class="line">Hello Vue!</h1>
</div>

</body>
<script type="module">
    import {createApp} from "../../../../../js/vue.esm-browser.js";

    const  app =createApp({
        data(){
            return{
                line:"linedecoration",
            }
        }
    })
    app.mount("#app")
</script>
</html>